<template>
  <div class="tutorial">
    <h2>🔒 路由独享守卫（beforeEnter）学习</h2>
    <p>只对某一条路由生效的守卫，适合对敏感页面做精细控制。</p>

    <h3>使用场景</h3>
    <ul>
      <li>某个管理页的权限校验。</li>
      <li>进入页面前拉取必要数据。</li>
      <li>根据条件决定进入或重定向。</li>
    </ul>

    <h3>示例配置</h3>
    <pre class="code"><code>const routes = [
  {
    path: '/admin',
    component: AdminView,
    beforeEnter: (to, from, next) => {
      const isAdmin = localStorage.getItem('role') === 'admin'
      if (!isAdmin) return next('/no-access')
      next()
    }
  }
]</code></pre>

    <p class="tip">提示：<code>beforeEnter</code> 每次进入该路由都会触发。</p>
  </div>
</template>

<script setup>
// 本教程展示路由独享守卫 beforeEnter 的典型用法
</script>

<style scoped>
.tutorial { padding: 20px; }
h2 { margin-bottom: 10px; }
h3 { margin-top: 20px; margin-bottom: 8px; }
.code { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; overflow:auto; }
.tip { margin-top: 10px; color: #7c2d12; background: #ffedd5; padding: 8px 12px; border-radius: 6px; }
</style>